<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:cc="http://java.sun.com/jsf/composite"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:poue="http://primefaces.org/ui/extensions">

    <!-- INTERFACE -->
    <cc:interface>
        <cc:attribute name="patient" />
    </cc:interface>

    <!-- IMPLEMENTATION -->
    <cc:implementation>
        <p:panelGrid rendered="#{cc.attrs.patient.person ne null}" columns="3" >
            <!--            <p:outputLabel value="Title"/>-->
            <p:selectOneMenu  id="cmbTitle" value="#{cc.attrs.patient.person.title}"  >
                <f:selectItem itemLabel="Select Title" />
                <f:selectItems value="#{enumController.title}"/>
            </p:selectOneMenu>
            <!--            <p:outputLabel value="Name"/>-->
            <p:inputText rendered="true"
                         autocomplete="off" 
                         id="txtNewPtName"
                         value="#{cc.attrs.patient.person.name}" 
                         style="width:300px;text-transform:capitalize;">
            </p:inputText>
            <!--            <p:outputLabel value="NIC"/>-->
            <p:inputMask mask="999999999V" id="nic" 
                         autocomplete="off" maxlength="11" 
                         value="#{cc.attrs.patient.person.nic}"
                         style="width: 100px;">
            </p:inputMask>
            <!--<p:outputLabel value="Sex"/>-->
            <p:selectOneMenu id="txtNewSex"  value="#{cc.attrs.patient.person.sex}" style="width: 200px;">
                <f:selectItem itemLabel="Select Sex"/>
                <f:selectItems value="#{enumController.sex}"/>
            </p:selectOneMenu>

            <!--<p:outputLabel value="Age"/>-->
            <h:panelGroup>
                <p:inputText autocomplete="off"  id="year" style="width: 80px;"  value="#{bhtEditController.yearMonthDay.year}">
                    <f:ajax event="keyup" execute="@this month day" render="calNewPtDob" listener="#{bhtEditController.dateChangeListen()}"  />
                </p:inputText>

                <p:inputText autocomplete="off" id="month"  style="width: 80px; margin-left: 5px;"   value="#{bhtEditController.yearMonthDay.month}">
                    <f:ajax event="keyup" execute="@this year day" render="calNewPtDob" listener="#{bhtEditController.dateChangeListen()}"  />
                </p:inputText>

                <p:inputText autocomplete="off" id="day"  style="width: 80px;  margin-left: 5px;"   value="#{bhtEditController.yearMonthDay.day}">
                    <f:ajax event="keyup" execute="@this year month" render="calNewPtDob" listener="#{bhtEditController.dateChangeListen()}" />
                </p:inputText>
                <br/>
                <p:outputLabel value="#{cc.attrs.patient.age}" id="lblAge" ></p:outputLabel>
            </h:panelGroup>
            <!--<p:outputLabel value="Date of Birth"/>-->
            <p:calendar  value="#{cc.attrs.patient.person.dob}" id="calNewPtDob"  navigator="true" pattern="dd/MM/yyyy" >
                <f:ajax event="dateSelect" execute="calNewPtDob" render="lblAge" />
            </p:calendar>

            <!--<p:outputLabel value="Address"/>-->
            <p:inputTextarea  id="address" value="#{cc.attrs.patient.person.address}"/>                                  

            <h:panelGroup>
                <!--<p:outputLabel value="Mobile Phone"/>-->
                <p:inputMask id="mno" mask="999-9999999" autocomplete="off" maxlength="11" 
                             value="#{cc.attrs.patient.person.mobile}" >
                </p:inputMask>
                <!--<p:outputLabel value="Home Phone"/>-->
                <p:inputMask id="hno" mask="999-9999999" autocomplete="off" maxlength="11" style="margin-top: 8px;"
                             value="#{cc.attrs.patient.person.phone}" >
                </p:inputMask>
            </h:panelGroup>
        </p:panelGrid>    
        <p:tooltip for="txtNewPtName" value="Patient Name"  showDelay="0" hideDelay="0"   ></p:tooltip>
        <p:tooltip for="nic" value="NIC No"  showDelay="0" hideDelay="0"   ></p:tooltip>
        <p:tooltip for="calNewPtDob" value="Date Of Birth"  showDelay="0" hideDelay="0"   ></p:tooltip>
        <p:tooltip for="address" value="Address"  showDelay="0" hideDelay="0"   ></p:tooltip>
        <p:tooltip for="mno" value="Mobile Number"  showDelay="0" hideDelay="0"   ></p:tooltip>
        <p:tooltip for="hno" value="Home Phone Number"  showDelay="0" hideDelay="0"   ></p:tooltip>
        <p:tooltip for="txtNewSex" value="Sex"  showDelay="0" hideDelay="0"   ></p:tooltip>
        <p:tooltip for="cmbTitle" value="Title"  showDelay="0" hideDelay="0"   ></p:tooltip>



        <p:watermark value="Patient Name" for="txtNewPtName" />
        <p:watermark value="Date of Birth" for="calNewPtDob" />
        <p:watermark value="Address" for="address" />
        <p:watermark value="Mobile Phone" for="mno" />
        <p:watermark value="Home Phone" for="hno" />
        <p:watermark value="NIC" for="nic" />
        <p:watermark value="YEAR" for="year" />
        <p:watermark value="MONTH" for="month" />
        <p:watermark value="DAYS" for="day" />
    </cc:implementation>
</html>